<template>
  <!--供应商分类-->
  <div @click="selectSlideUp2">
    <div class="yx-tabBar clearfix">
      <router-link to="item" class="fl yx-tab yx-freeze">
        物料分类
      </router-link>
      <router-link to="supplier" v-if="role_id!=4&&role_id!=5" class="fl yx-tab yx-freeze yx-active">
        供应商分类
      </router-link>
      <router-link to="relative" v-if="role_id!=4&&role_id!=5" class="fl yx-tab yx-freeze">
        关联分析
      </router-link>
    </div>

    <div class="yx-condition clearfix">
      <div class="yx-form-item">
        <div class="yx-form-inline">
          <label class="yx-form-label">供应商名称</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_vendor_input_delete" @click="inputClear('query_get_vendor_input')">X</div>
            <input type="text" v-model="query_get_vendor_input"
                   @click.stop="selectClick('query_get_vendor')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_vendor">
                <li v-for="item in query_get_vendorData" @click="choose_query_get_vendorFun(item.name,item.value)">
                  <nobr>{{item.name}}</nobr>
                </li>
                <li v-show="query_get_vendorFunING">加载中...</li>
                <li v-if="!query_get_vendorFunING&&query_get_vendorData.length==0">空</li><!-- @click="choose_query_get_vendorFun('','')"-->
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">智能分类</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_item_category_input_delete" @click="inputClear('query_get_item_category_input')">X</div>
            <input type="text" v-model="query_get_item_category_input"
                   @click.stop="selectClick('query_get_item_category')" readonly>
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_item_category">
                <li v-for="item in query_get_item_categoryData" @click="choose_query_get_item_categoryFun(item.name,item.value)">{{item.name}}</li>
                <!--<li v-show="query_get_item_categoryData.length==0" @click="query_get_item_categoryFun('')">
                  空
                </li>-->
              </div>
            </transition>
          </div>
        </div>
        <div class="yx-form-inline">
          <label class="yx-form-label">采购员</label>
          <div class="yx-form-ul">
            <div class="delete" v-show="query_get_buyer_input_delete" @click="inputClear('query_get_buyer_input','yxBuyerClass','yxBuyerClassID')">X</div>
            <input type="text" v-model="query_get_buyer_input"
                   @click.stop="selectClick('query_get_buyer')">
            <transition name="fade">
              <div class="yx-form-inner-list" v-show="query_get_buyer">
                <li v-for="item in query_get_buyerData" @click="choose_query_get_buyerFun(item.name,item.value)">
                  <nobr>{{item.value}} {{item.name}}</nobr>
                </li>
                <!--<li v-show="query_get_buyerData.length==0" @click="choose_query_get_buyerFun('','')">
                  空
                </li>-->
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div class="clearfix">
        <div class="fr yx-marginRight30">
          <button class="yx-btn-yellow" @click="queryFun()">查询</button>
          <button class="yx-btn-grey" @click="clearCondition()">重置</button>
        </div>
      </div>
    </div>
    <div class="yx-content">
      <div class="yx-label pr">分类占比
        <!--<button>导出结果</button>-->
      </div>
      <div class="yx-marginTop40">
        <div class="clearfix" v-show="!supplierOverviewIsLoading&&!supplierOverviewIsError">
          <div class="fl yx-pie" id="containerPie_supplier"></div>
          <div class="fr">
            <table class="yx-table yx-width1400">
              <tr>
                <th>类别</th>
                <th>采购金额</th>
                <th>金额占比</th>
              </tr>
              <tr v-for="supplier in supplier_overviewData">
                <td><i class="yx-ibox"
                       :class="{'bg-ffbe4c':supplier.category=='A','bg-fc7470':supplier.category=='B','bg-56b5f1':supplier.category=='C'}"></i>
                  {{supplier.category}}
                </td>
                <td>{{supplier.purchase_amount | numberThousand}}</td>
                <td>{{supplier.amt_percent | numberPercent}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="loadingBox">
          <div class="loadding80" v-show="supplierOverviewIsLoading"></div>
          <div class="frame-noData" v-show="supplierOverviewIsError">暂无数据...</div>
        </div>
      </div>
      <div class="yx-label yx-marginTop40 ">分类细则</div>
      <table class="yx-table yx-marginTop40 yx-widthP100"
             v-show="!supplierCategoryIsError&&!supplierCategoryIsLoading">
        <tr>
          <th>供应商</th>
          <th>智能分类</th>
          <th>最近采购时间</th>
          <th>合作天数</th>
          <th>到货频率</th>
          <th>采购金额</th>
          <th>采购提前期波动</th>
          <th>提货提前期波动</th>
          <th>价格波动</th>
        </tr>
        <tr v-for="item in supplierCategoryData.items">
          <td>{{item.vendor}}</td>
          <td><i class="yx-ibox"
                 :class="{'bg-ffbe4c':item.category=='A','bg-fc7470':item.category=='B','bg-56b5f1':item.category=='C'}"></i>
            {{item.category}}
          </td>
          <td>{{item.last_purchase_time|date10Filter}}</td>
          <td>{{item.cooperation_time|numberThousand}}</td>
          <td>{{item.purchase_freq|numberThousand}}</td>
          <td>{{item.purchase_amount|numberThousand}}</td>
          <td>{{item.std_lt|numberThousand}}</td>
          <td>{{item.std_tihuo|numberThousand}}</td>
          <td>{{item.std_price|numberThousand}}</td>
        </tr>
      </table>
      <div class="table-tr" v-show="supplierCategoryData.pages>1&&!supplierCategoryIsError&&!supplierCategoryIsLoading">
        <div class="pageturn">
          共
          <em>{{supplierCategoryData.total | numberThousand}}</em>
          条，第
          <em>{{supplierCategoryData.page | numberThousand}}</em>
          /
          <em>{{supplierCategoryData.pages | numberThousand}}</em>
          页，跳转到第
          <input type="text" class="pageturn-ipt" v-model="supplierCategoryPage" value=""/>
          页
          <span class="page-turn" @click="supplier_categoryFun(supplierCategoryPage)">跳转</span>
          <span class="page-first" @click="supplier_categoryFun(1)">首页</span>
          <span class="page-up" @click="supplierCategoryData.page>1?supplier_categoryFun(supplierCategoryData.page-1):1">上一页</span>
          <span class="page-down"
                @click="supplierCategoryData.page<supplierCategoryData.pages?supplier_categoryFun(supplierCategoryData.page+1):''">下一页</span>
          <span class="page-last" @click="supplier_categoryFun(supplierCategoryData.pages)">末页</span>
        </div>
      </div>
      <div class="loadingBox">
        <div class="loadding80" v-show="supplierCategoryIsLoading"></div>
        <div class="frame-noData" v-show="supplierCategoryIsError">暂无数据...</div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../common/js/common';

  var echarts = require('echarts');
  export default {
    data() {
      return {
      	role_id:0,	//存储权限代号
        colorList: [
          '#1fbb61', '#ffbe4c', '#fc7470', '#56b5f1', '#837df5', '#1acfc9', '#d275f4'
        ],
        optionPie: {
          tooltip: {
            trigger: 'item',
            formatter: function(params){
              return params.seriesName + ":<br />"+
                params.name+":"+(params.value*100).toFixed(2)+"%";
            },
            confine: true
          },
          color: ['#ffbe4c', '#fc7470', '#56b5f1', '#51d489'],
          series: {
            name: '供应商采购金额占比',
            type: 'pie',
            radius: '90%',
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {value: [], name: 'A'},
              {value: [], name: 'B'},
              {value: [], name: 'C'},
            ],
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: 'white'
              },
              emphasis: {
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        },
        optionBarLine: {
          tooltip: {
            trigger: 'axis',
            /* formatter: function (params) {
               var paramsItem='';
               for(var i=0;i<params.length;i++){
                 paramsItem=paramsItem+params[i].seriesName + '：' + params[i].data[1].toFixed(2)+'</br>'
               }
               return (params[0].data[0]+'</br>'+paramsItem)
             },*/
          },
          legend: {
            data: []
          },
          grid: {
            show: true,
            top: '50',
            left: '4%',
            right: '4%',
            bottom: '50',
            /*backgroundColor:'#fafafa',*/
            borderWidth: 0
          },
          dataZoom: [{
            show: true,
            height: 20,
            xAxisIndex: [0],
            bottom: 0,
            start: 0,
            end: 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: "#d3dee5",

            },
            textStyle: {
              color: "#fff"
            },
            borderColor: "#90979c"
          }, {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }],
          xAxis: {
            type: 'category',
            data: [],
            name: '时间',
          },
          yAxis: [{
            name: '',
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              /*formatter:function(v){
                return $scope.allFun.wan(v);
              }*/
            }
          }],
          series: []
        },
        selectListName: [
          'query_get_item_big_class',
          'query_get_item_small_class',
          'query_get_item',
          'query_get_plan_class',
          'query_get_item_category',
          'query_get_buyer',
          'query_get_sourcing',
          'query_get_planner',
          'query_get_vendor'
        ],

        query_get_item_category: false,
        query_get_item_category_input: '',
        query_get_item_category_input_id:'',
        query_get_item_category_input_boss:'',
        query_get_item_category_input_delete:false,
        query_get_item_categoryData: [],//下拉框--智能分类

        query_get_buyer: false,
        query_get_buyer_input: '',
        query_get_buyer_input_id:'',
        query_get_buyer_input_boss:'',
        query_get_buyer_input_delete:false,
        query_get_buyerData: [],//下拉框--采购员

        query_get_vendor: false,
        query_get_vendor_input_delete:false,
        query_get_vendor_input: '',
        query_get_vendor_input_id:'',
        query_get_vendor_input_boss:'',
        query_get_vendorFunING:true,
        query_get_vendorData: [],//下拉框--供应商名称

        yx_select_box_show: false,
        isLoading: true,
        isError: false,
        overviewInfoData: {Class_A_item: {}, Class_B_item: {}, Class_C_item: {}},//圆饼图+表数据
        itemCategoryData: {},
        itemCategoeyIsLoading: true,
        itemCategoeyIsError: false,
        itemCategoryDetailData: {},
        itemCategoeyDetailIsLoading: true,
        itemCategoryDetailIsError: false,
        itemClassSelectVal: "按供应商类别筛选",//物料分类下拉框状态
        itemCategoryDetailCurrentItem: '',

        overviewInfo_getSupplierData: {},//获取供应商
        supplier_overviewData: {},//供应商圆饼图
        supplierOverviewIsLoading: true,
        supplierOverviewIsError: false,
        supplierCategoryData: {},
        supplierCategoryIsLoading: true,
        supplierCategoryIsError: false,

        supplierCategoryPage:'',
        relevance_silent_queryData: {},
        relevanceSilentQueryIsLoading: true,
        relevanceSilentQueryIsError: false,
        relevance_stable_analysisData: {},
        relevanceStableAnalysisIsLoading: true,
        relevanceStableAnalysisIsError: false,
        relevance_price_analysisData: {},
        relevancePriceAnalysisIsLoading: true,
        relevancePriceAnalysisIsError: false,
        relevance_purchase_analysisData: {},
        relevancePurchaseAnalysisIsLoading: true,
        relevancePurchaseAnalysisIsError: false,
      }
    },
    mounted() {
    	this.getRole_id();//权限操作
      this.query_get_vendorFun();
      this.query_get_item_categoryFun();
      this.query_get_buyerFun();
      this.queryFun();
      this.selectSlideUp2();
    },
    activated(){
      if(sessionStorage.yxBuyerClass){
        this.query_get_buyer_input=sessionStorage.yxBuyerClass;
        this.query_get_buyer_input_id=sessionStorage.yxBuyerClassID;
      }else{
        this.query_get_buyer_input='';
        this.query_get_buyer_input_id='';
      }
    },
    watch: {
      itemClassSelectVal: function () {
        if (this.itemClassSelectVal == '按供应商类别筛选') {
          this.itemCategory();
        } else {
          this.itemCategory();//需要改动，模糊搜索
        }
      },
      query_get_buyer_input: function () {//采购员
        if(this.query_get_buyer_input==''){
          this.query_get_buyer_input_id='';
          this.query_get_buyer_input_delete=false;
        }else{
          this.query_get_buyer_input_delete=true;
        }
        this.query_get_buyerFun();
        sessionStorage.yxBuyerClass=this.query_get_buyer_input;
      },
      query_get_vendor_input: function () {//供应商名称
        if(this.query_get_vendor_input==''){
          this.query_get_vendor_input_id='';
          this.query_get_vendor_input_delete=false;
        }else{
          this.query_get_vendor_input_delete=true;
        }
        this.query_get_vendorFun()
      },
      query_get_item_category_input:function(){//智能分类
        if(this.query_get_item_category_input==''){
          this.query_get_item_category_input_id='';
          this.query_get_item_category_input_delete=false;
        }else{
          this.query_get_item_category_input_delete=true;
        }
      },
    },
    methods: {
    	/*权限控制*/
    	getRole_id:function(){
	    	this.role_id = localStorage.getItem("role_id");
	    },
      /*置空*/
      clearCondition: function () {
        this.query_get_vendor_input = '';
        this.query_get_item_category_input = '';
        this.query_get_buyer_input = '';
        this.query_get_sourcing_input = '';
        this.query_get_planner_input = '';
        this.query_get_vendor_input_id = '';
        this.query_get_item_category_input_id = '';
        this.query_get_buyer_input_id = '';
        this.query_get_sourcing_input_id = '';
        this.query_get_planner_input_id = '';
        this.query_get_vendor_input_boss = '';
        this.query_get_item_category_input_boss = '';
        this.query_get_buyer_input_boss = '';
        this.query_get_sourcing_input_boss = '';
        this.query_get_planner_input_boss = '';
      },
      /*智能分类tab导航条*/
      selectClick: function (x) {
        var _self = this;
        /*var funName = x + 'Fun';
        _self[funName]();*/
        for (var i = 0; i < _self.selectListName.length; i++) {
          var yy = _self.selectListName[i];
          yy == x ? _self[x] = !_self[x] : _self[yy] = false;
        }
      },
      selectSlideUp2: function () {
        var _self = this;
        for (var i = 0; i < _self.selectListName.length; i++) {
          var yx = _self.selectListName[i];
          _self[yx] = false;
        }
      },

      /*下拉框--供应商名称*/
      query_get_vendorFun: function () {
        var _self = this;
        _self.query_get_vendorFunING=true;
        var yx_data = {
          "dim": this.query_get_vendor_input.indexOf(' ')>-1? this.query_get_vendor_input.split(' ')[1] : this.query_get_vendor_input,
        };
        common.getData(-1,common.url_constitute.query_get_vendor, 'post', yx_data, function (d) {
          _self.query_get_vendorFunING=false;
          if (d.data.code == 1024) {
            _self.query_get_vendorData = d.data.result;
          }
        })
      },
      /*下拉框--供应商名称--选择*/
      choose_query_get_vendorFun: function (name, num) {
        this.query_get_vendor_input = name;
        this.query_get_vendor_input_id=num;
      },
      /*下拉框--智能分类*/
      query_get_item_categoryFun: function () {
        var _self = this;
        var yx_data = {
          "dim": this.query_get_item_category_input == '' ? '' : this.query_get_item_category_input,
        };
        common.getData(-1,common.url_constitute.query_get_vendor_category, "post", yx_data, function (d) {
          if (d.data.code == 1024) {
            _self.query_get_item_categoryData = d.data.result;
          }
        })
      },
      /*下拉框--智能分类--选择*/
      choose_query_get_item_categoryFun: function (name,num) {
        this.query_get_item_category_input = name;
        this.query_get_item_category_input_id=num;
        this.selectSlideUp2();
      },
      /*下拉框--采购员*/
      query_get_buyerFun: function () {
        var _self = this;
        var yx_data = {
          "dim": this.query_get_buyer_input.indexOf(' ')>-1?this.query_get_buyer_input.split(' ')[1]:this.query_get_buyer_input,
        };
        common.getData(-1,common.url_constitute.query_get_buyer, "post", yx_data, function (d) {
          if (d.data.code == 1024) {
            _self.query_get_buyerData = d.data.result;
          }
        })
      },
      /*下拉框--采购员--选择*/
      choose_query_get_buyerFun: function (name, num) {
        this.query_get_buyer_input = num+' '+name;
        this.query_get_buyer_input_id=num;
        this.selectSlideUp2();
        sessionStorage.yxBuyerClass=this.query_get_buyer_input;
        sessionStorage.yxBuyerClassID=this.query_get_buyer_input_id;
      },
      /*input自带x*/
      inputClear:function(who,sessionWho,sessionID){
        var _self=this;
        _self[who]='';
        var whoID=who+'_id';
        _self[whoID]='';
        if(who=='query_get_buyer_input'){
          sessionStorage[sessionWho]='';
          sessionStorage[sessionID]='';
        }
      },
      /*供应商分类--供应商分类占比*/
      supplier_overviewFun: function () {
        var _self = this;
        _self.supplierOverviewIsLoading = true;
        var yx_data = {
          "vendor":this.query_get_vendor_input_boss,
          "category": this.query_get_item_category_input_boss,
          "buyer": this.query_get_buyer_input_boss,
          "sourcing": '',
          "planner": '',
        };
        /*物料分类圆饼图*/
        common.getData(0,common.url_constitute.supplier_overview, "post", yx_data, function (d) {
          _self.supplierOverviewIsLoading = false;
          if (d.data.code == 1024) {
            _self.supplier_overviewData = d.data.result;
            if(_self.supplier_overviewData.length<1){
              _self.supplierOverviewIsError = true;
            }else{
              _self.supplierOverviewIsError = false;
              var optionPie_supplier = _self.optionPie;
              optionPie_supplier.series.data[0].value = _self.supplier_overviewData[0].amt_percent;
              optionPie_supplier.series.data[1].value = _self.supplier_overviewData[1].amt_percent;
              optionPie_supplier.series.data[2].value = _self.supplier_overviewData[2].amt_percent;
              var containerPie_supplier = echarts.init(document.getElementById('containerPie_supplier'));
              containerPie_supplier.setOption(optionPie_supplier,true);
              window.addEventListener("resize",function(){
                containerPie_supplier.resize();
              })
            }
          }else if(d.data.code == 9007){
            _self.supplierOverviewIsError = true;
          }
        });
      },
      /*供应商分类--供应商智能分类细则*/
      supplier_categoryFun: function (page) {
        var _self = this;
        _self.supplierCategoryIsLoading = true;
        var yx_data = {
          "vendor":this.query_get_vendor_input_boss,
          "category": this.query_get_item_category_input_boss,
          "buyer": this.query_get_buyer_input_boss,
          "sourcing": '',
          "planner": '',
          "page": page
        }
        common.getData(1,common.url_constitute.supplier_category, 'post', yx_data, function (d) {
          _self.supplierCategoryIsLoading = false;
          if (d.data.code == 1024) {
            _self.supplierCategoryData = d.data.result;
            if(_self.supplierCategoryData.total<1){
              _self.supplierCategoryIsError = true;
            }else{
              _self.supplierCategoryIsError = false;
            }
          }else if(d.data.code==9007){
            _self.supplierCategoryIsError = true;
          }
        })
      },
      /*关联分析--查询*/
      queryFun: function () {
        this.query_get_vendor_input_boss=this.query_get_vendor_input_id;
        this.query_get_item_category_input_boss=this.query_get_item_category_input_id;
        this.query_get_buyer_input_boss=this.query_get_buyer_input_id;
        this.supplierCategoryPage=1;
        this.supplier_overviewFun();
        this.supplier_categoryFun(1);
        this.supplierCategoryIsLoading = true;
      },
    },
  }
</script>

<style>
  @import "../common/css/base.css";
  @import "../common/css/yx.less";
</style>
